<script lang="ts" setup>
import CourseCard from './CourseCard.vue'
import { useClassDescription } from '@/composables/useClassDescription'

const { classDescription, classInfo } = useClassDescription()
</script>

<template>
  <div class="bg-arco-2 pa-xs rounded">
    <h2 class="card-title mb-xs"><i class="i-fluent-info-12-regular text-lg" />班级信息</h2>
    <a-descriptions size="small" :column="{ xs: 1, md: 2, lg: 3 }" :data="classDescription">
    </a-descriptions>
  </div>

  <div class="flex items-end flex-wrap-reverse gap-2 pb-xs">
    <CourseCard class="flex-grow basis-6/10" :courseID="classInfo?.courseID" />

    <div class="bg-arco-2 min-w-xs pa-xs rounded flex-grow basis-3/10">
      <h2 class="card-title"><i class="i-fluent-app-folder-16-regular text-lg" />学习进度</h2>
      <a-progress :percent="0.6" />
      <p>加权分数: 68</p>
    </div>
  </div>
</template>
